/* eslint-disable @typescript-eslint/no-empty-function */
/* eslint-disable no-unused-expressions */
/* eslint-disable no-use-before-define */

import { Fn, tryOnUnmounted, useDebounceFn } from '@vueuse/core';
import type { EChartsOption } from 'echarts';
import type { Ref } from 'Vue';
import { computed, nextTick, ref, unref, watch } from 'vue';

import { useEventListener } from '@/hooks/useEventListener';
import { useTimeoutFn } from '@/hooks/useTimeout';
import echarts from '@/utils/echarts';

export default function useEcharts(
    elRef:Ref<HTMLDivElement>,
    theme:'light' | 'dark' | 'default' = 'default',
)
{
    // 获取echarts主题
    const getDarkMode = computed(() => theme);
    // Echarts 实例
    let chartInstance:echarts.ECharts | null = null;
    // 渲染方法事件
    let resizeFn: Fn = resize;
    // 移除渲染方法事件
    let removeResizeFn: Fn = () => {};
    // Echarts 配置
    const cacheOptions = ref({}) as Ref<EChartsOption>;

    resizeFn = useDebounceFn(resize, 200);

    // 计算属性获取echarts配置属性
    const getOptions = computed(() => ({
            backgroundColor: 'transparent',
            ...cacheOptions.value,
        } as EChartsOption));

    // 设置echarts 配置属性
    function setOptions(options: EChartsOption, clear = true) {
        cacheOptions.value = options;
        // 如果传入的节点实际高度为0则返回 30毫秒后递归获取配置
        if (unref(elRef)?.offsetHeight === 0) {
            useTimeoutFn(() => {
                setOptions(unref(getOptions));
            }, 30);
            return;
        }
        // 当节点渲染后初始化echarts
        nextTick(() => {
            useTimeoutFn(() => {
                if (!chartInstance) {
                    initCharts();

                    if (!chartInstance) return;
                }
                clear && chartInstance?.clear();

                chartInstance?.setOption(unref(getOptions));
            }, 30);
        });
    }
    // Echarts 绘制函数
    function resize() {
        chartInstance?.resize();
    }
    // 初始化echarts
    function initCharts() {
        const el = unref(elRef);
        if (!el || !unref(el)) {
            return;
        }
        chartInstance = echarts.init(el);
        // 添加节点渲染方法和移除方法后监听
        const { removeEvent } = useEventListener({
            el: window,
            name: 'resize',
            listener: resizeFn,
        });

        removeResizeFn = removeEvent;
        if (el.offsetHeight === 0) {
            useTimeoutFn(() => {
                resizeFn();
            }, 30);
        }
    }

    watch(
        () => getDarkMode.value,
        () => {
            if (chartInstance) {
                chartInstance.dispose();
                initCharts();
                setOptions(cacheOptions.value);
            }
        },
    );

    // 执行hooks 时判断当前是否在 OnUnmounted 生命周期 如果在则销毁当前echarts 实例
    tryOnUnmounted(() => {
        if (!chartInstance) return;
        removeResizeFn();
        chartInstance.dispose();
        chartInstance = null;
    });

    function getInstance(): echarts.ECharts | null {
        if (!chartInstance) {
            initCharts();
        }
        return chartInstance;
    }

    return {
        setOptions,
        resize,
        echarts,
        getInstance,
    };

}
